<template>
  <div class="menu" @click="skipTo">
    <img class="menu_img--icon" :src="icon">
    <div class="menu_div--title">{{title}}</div>
  </div>
</template>
<script setup>
import {defineProps} from 'vue';

const props = defineProps({
  icon: {
    type:String,
    default: undefined
  },
  title:{
    type:String,
    default: undefined
  },
  url:{
    type: String,
    default: undefined
  }
})
/**跳转系统 */
const skipTo = () =>{

}
</script>
<style scoped>
.menu {
  cursor: pointer;
  width: 5.625rem;
  height: 5.625rem;
  border-radius: 50%;
  border: 1px solid #1078be;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0px 0px 1.5rem 1px #1078be;
  color: white;
}
.menu_img--icon {
  width: 2.5rem;
  height: 2.5rem;
}

.menu_div--title {
  width: 6.375rem;
  height: 2rem;
  background: linear-gradient(
    90deg,
    rgba(25, 59, 116, 0.5) 0%,
    rgba(121, 191, 255, 0.5) 50%,
    rgba(10, 36, 79, 0.5) 100%
  );
  color: white;
  text-shadow: 0px 3px 2px rgba(255, 255, 255, 0.3);
  text-align: center;
  line-height: 2rem;
  position: absolute;
  right: -6.375rem;
  top: 1.8125rem;
}
</style>